<template>
    <div class="my-information">
        <div class="my-information-top">个人资料</div>
        <div class="my-information-content">
            <div class="my-information-toxiang"><img :src="filelists[0].url" alt="">
            <!-- <div>{{filelists[0].url}}</div> -->
                    <el-upload
    class="avatar-uploader"
    action="#"
    ref="uploadFile"
    :show-file-list="false"
    name="file"
    method='post'
    accept=".jpg,.png"
    :auto-upload='false'
    :on-success="handleAvatarSuccess"
    :before-upload="beforeUpload"
    v-model:file-list='filelists' 
    :limit="1"
  >
  </el-upload>

            </div>
            <div class="my-information-text">
                <div class="input-text">
                    <h1>姓名  </h1><input type="text" v-model="myname" disabled='disabled'>
                </div>
                <div class="input-text">
                    <h1>手机号码</h1><input type="text" v-model="myphone" disabled='disabled'>
                </div>
                <div class="input-text">
                    <h1>部门</h1><input type="text" v-model="mydepartment" disabled='disabled'>
                </div>
                <div class="input-text">
                    <h1>职位</h1><input type="text" v-model="myposition" disabled='disabled'>
                </div>

            </div>
            <div class="my-information-bt" @click="baocun">保存</div>
        </div>
    </div>
</template>


<script>
import { ref,reactive} from 'vue-demi'
import { useStore } from 'vuex'
import {getWorkMessageNum,getUserInfo,updateUserInfo} from '../../api/api'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import { useRouter,useRoute} from 'vue-router'

export default {
    
    setup() {
        const router = useRouter()
     const store = useStore()
     const myname=ref('')
     const myphone=ref('')
     const mydepartment=ref('')
     const myposition=ref('')
     
     const messagenun= ref(0)
     const datasinfo=reactive({
        username:'',
        userimg:'',
        userposition:'',
     })
     getUserInfo({userid:localStorage.getItem('userinfoId')}).then(res=>{
        console.log('getUserInfo2',res)
        datasinfo.username=res.user.name
        datasinfo.userposition=res.user.position
        datasinfo.userimg=res.user.wxHeadImage
         myname.value=res.user.name
        myphone.value=res.user.mobile
        mydepartment.value=res.user.department
        myposition.value=res.user.position
        console.log( datasinfo.userimg)
        filelists.value[0]={
            name:'头像',
            url:res.user.wxHeadImage
        }
     }).catch (res=>{

     })
    const beforeUpload = (file) => {
           console.log(file)
        }
    // 
    const baocun =()=>{
        console.log(filelists.value)
        
        // updateUserInfo({userid:localStorage.getItem('userinfoId')}).then(res=>{
        //     console.log(res)
        // })
    }
    const filelists=ref([])


     return{
        beforeUpload,
        filelists,
        baocun,
        datasinfo,
        myname,
        myphone,
        mydepartment,
        myposition,
     }
        
    },
}
</script>

<style>
.my-information{
    width: 1511px;
    height: 936px;
    background: #FFFFFF;
    box-shadow: 0px 8px 32px 0px rgba(61,76,140,0.0300);
    border-radius: 32px;
    margin-top: 120px;
    margin-left: 65px;
}
.my-information-top{
    width: 1511px;
    height: 80px;
    border-bottom: 4px solid #F2F5FA;
    font-size: 24px;
    font-weight: bold;
    color: #020113;
    line-height: 80px;
    text-indent: 40px;
}
.my-information-toxiang{
     width: 164px;
     height: 164px;
    margin: 0 auto;
    margin-top: 57px;
    margin-bottom: 32px;
    position: relative;
    

}
.my-information-toxiang img{
    border-radius: 50%;
    width: 164px;
     height: 164px;
}
.my-information-content{
    width: 1511px;
    height: auto;
    text-align: center;
}
.input-text{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}
.input-text h1{
    width: 75px;
    height: 28px;
font-size: 18px;
font-weight: 400;
color: #020113;
line-height: 28px;
text-align: left;
    
}
.input-text input{
    width: 572px;
    height: 48px;
    border-radius: 8px;
    /* opacity: 0.3; */
    border: 1px solid #B3B2B8;
    font-weight: 400;
    color: #020113;
    font-size: 18px;
    text-indent: 20px;
    
}
.my-information-bt{
    width: 652px;
    height: 56px;
    background: #020113;
    border-radius: 8px;
    text-align: center;
    line-height: 56px;
    color: white;
    margin: 0 auto;
    margin-top: 24px;
    font-size: 24px;
}
.my-information-toxiang{

}
.my-information-toxiang .avatar-uploader{
     width: 164px;
     height: 164px;
     background: red;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
}
.my-information-toxiang .avatar-uploader .el-upload{
    width: 100%;
    height: 100%;
}
.my-information-toxiang  .el-upload__input{
    width: 100%;
    height: 100%;
}

</style>